<style scoped>
.container {
  padding: 16px;
  border: 1px solid #efefef;
}
.ruleForm {
  width: 80%;
}
.columnItem {
  display: inline-block;
  margin: 5px;
  float: left;
}
.box-card {
  margin-bottom: 20px;
}
.el-card__body {
  height: auto !important;
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 主体区 -->
    <div class="container">
      <!-- 表单区 -->
      <div class="form-data-box">
        <el-form
          :model="formBean"
          :rules="validateRules"
          ref="form1"
          label-width="150px"
          class="ruleForm"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="物料编号" prop="chipCode">
                <el-input
                  :readonly="readOnly"
                  v-model="formBean.chipCode"
                  placeholder="物料编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="芯片名称" prop="chipName">
                <el-input
                  :readonly="readOnly"
                  v-model="formBean.chipName"
                  placeholder="芯片名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表单区END -->
      <!-- 按钮操作区 -->
      <span slot="footer" class="form-btn-box">
        <el-button
          v-if="!readOnly && actType !== 'shenhe'"
          @click="resetForm('form1')"
          >重 置</el-button
        >
        <el-button
          v-if="!readOnly && actType !== 'shenhe'"
          type="primary"
          @click="submitForm('form1')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >确 定</el-button
        >
        <el-button
          v-if="!readOnly && actType == 'shenhe'"
          type="primary"
          @click="toShenhe('approved')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >通 过</el-button
        >
        <el-button
          v-if="!readOnly && actType == 'shenhe'"
          type="primary"
          @click="toShenhe('disapproved')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >驳 回</el-button
        >
        <el-button @click="cnacelForm('form1')">取 消</el-button>
      </span>
      <!-- 按钮操作区END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      firstLoadedData: "{}",
      // 新增用户表单信息
      formBean: {
        status: "",
        chipName: "",
        chipCode: "",
      },
      statusList: [],
      // 表单校验规则
      validateRules: {
        chipName: [
          { required: true, message: "请输入芯片名称", trigger: "blur" },
        ],
        chipCode: [
          { required: true, message: "请输入芯片编号", trigger: "blur" },
        ],
        status: [{ required: true, message: "请输入状态", trigger: "blur" }],
      },
      dicts: {},
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "",
      // 表单只读状态
      readOnly: false,
      readOnlyEdt: false,
    };
  },
  // 进入页面加载数据
  // activated() {
  // 	this.handleInitLoad();
  // },
  //弹出页
  props: {
    sourceData: {
      required: true,
    },
  },
  // 进入页面加载数据
  mounted() {
    this.handleInitLoad();
  },

  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      // this.loadSelectOptoins("chip", { type: "chip" });
      this.initFormData();
    },
    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      let url = "/herp/dictionary/";
      this.$axios
        .get(url, {
          params: {
            type: dictKind,
          },
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$set(this.dicts, dictKind, data.data.list);
          } else {
            console.log(data.message);
            // this.$error( "查询失败" + data.message );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 取消返回
     * @augments formName 表单名称
     */
    cnacelForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("cancel", this.cancelData);
    },
    /**
     * 重置表单
     * @augments formName 表单名称
     */
    resetForm(formName) {
      this.formBean = JSON.parse(this.firstLoadedData);
    },
    /**
     *初始化加载表单数据
     */
    initFormData() {
      this.selectedId = this.sourceData.seleid;
      this.actType = this.sourceData.actType;
      this.readOnlyEdt = true;
      if (this.actType == "view") {
        // 查看状态 标识表单只读
        this.readOnly = true;
      } else if (this.actType == "add") {
        this.readOnly = false;
        this.readOnlyEdt = false;
        //清空修改保存之后数据还存在的情况
        for (var key in this.formBean) {
          this.formBean[key] = "";
        }
        return;
      } else {
        this.readOnly = false;
      }
      this.$axios
        .get(`/bill/chip/${this.selectedId}/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          this.formBean = {};
          if (res.data.success == true) {
            this.formBean = res.data.data;
          } else {
            this.$error(res.data.msg);
          }
        })
        .catch(function (error) {});
    },
    /**
     * 提交表单
     * @augments formName 表单名称
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单校验成功
          this.fullscreenLoading = true;
          let url = "";
          if (this.actType == "add") {
            url = "/bill/chip/";
            resultPromise = this.$axios
              .post(url, this.formBean)
              .then((res) => {
                // 关闭提交表单的loading
                this.fullscreenLoading = false;
                let data = res.data;
                // 关闭提交表单的loading
                if (data.success) {
                  this.$message({
                    message: data.message,
                    type: "success",
                  });
                  this.$emit("ok", {});
                } else {
                  this.$error(data.message);
                }
              })
              .catch(function (error) {
                this.fullscreenLoading = false;
              });
          } else if (this.actType == "upd") {
            url = `/bill/chip/${this.selectedId}/`;
            this.$axios
              .put(url, this.formBean)
              .then((res) => {
                // 关闭提交表单的loading
                this.fullscreenLoading = false;
                let data = res.data;
                // 关闭提交表单的loading
                if (data.success) {
                  this.$message({
                    message: data.message || "修改成功",
                    type: "success",
                  });
                  this.$emit("ok", {});
                } else {
                  this.$error(data.message);
                }
              })
              .catch(function (error) {
                this.fullscreenLoading = false;
              });
          }
        }
      });
    },

    toShenhe(status) {
      let url = `/bill/chip/${this.selectedId}/${status}/`;
      this.$axios
        .post(url)
        .then((res) => {
          // 关闭提交表单的loading
          this.fullscreenLoading = false;
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.$message({
              message: data.message || "审核成功",
              type: "success",
            });
            this.$emit("ok", {});
          } else {
            this.$error(data.message);
          }
        })
        .catch((error) => {
          this.fullscreenLoading = false;
        });
    },
  },
};
</script>
